<template>
	<!-- v-model使用 -->
	<view>
		<input type="text" value="" v-model="text"/>
		<button type="primary" @click="add">提交</button>
		<view class="">
			<view v-for="item, index in list" :key="index">
				{{item}}
			</view>
		</view>
		<view>{{fullTest}}</view>
		<button type="primary" @click="alter">计算属性变化</button>
	</view>
</template>

<!-- 
	v-text
	v-html
	v-bind = :
	v-on:click = @click
	v-if
	v-show
	v-for    ======>    v-for="item,index in lisgt" :key="index"
 
 -->

<script>
	export default {
		data() {
			return {
				list:[
					"hello",
					"world"
				],
				text:null,
				firstTest: "hello",
				lastTest: "world",
				fullTest: "hello word"
			}
		},

		created() {
			// 创建实例之后
			console.log(this.list)
			console.log("created")
		},	
		mounted() {
			// 挂在页面渲染
			console.log(this.list)
			console.log("mounted")
		},
		onLoad() {
			// 加载页面的时候
			console.log(this.list)
			console.log("onLoad")
		},
		
		methods: {
			add(){
				this.list.push(this.text)
				this.text = null
			},
			alter(){
				this.firstTest = "pp"
			}
		},
		
		// 计算属性，计算属性具有缓存特性，只有参与计算的属性发生变化的时候才会执行，否则不会执行
		// computed:{
			// 写方法，使用的时候当插值用
			// fullTest(){
				// return this.firstTest + this.lastTest
			// }			
		// },
		
		// 监听
		watch:{
			// 监听那个变量就写哪个变量
			firstTest(){
				this.fullTest = this.firstTest + this.lastTest
			},
			lastTst(){
				this.fullTest = this.firstTest + this.lastText
			}
		}
	}
</script>

<style>
</style>
